<template>
  <div class="player">
    <audio v-if="musicId && typeof musicId === 'string' && musicId.startsWith('http')" @timeupdate="handleTimeUpdate"
      @loadedmetadata="handleMetadataLoaded" ref="audioPlayer" :src="musicId"></audio>
    <audio v-else @timeupdate="handleTimeUpdate"
      @loadedmetadata="handleMetadataLoaded" ref="audioPlayer" :src="musicId==''?'':audioUrl + musicId"></audio>
    
    <div style="width: 100%;position: absolute;left: 25%;top: 6%;font-weight: bold;">
      {{ musicName }}&nbsp;-&nbsp;{{ singerName }}
    </div>
    <div style="width: 100%;position: relative;top: 28%;">
      <el-slider @change="range" style="width:65%;margin-left: 3%;" v-model="progress" :show-tooltip=false></el-slider>
      <p style="padding: 0;margin: 0;position: relative;top: -10%;left: 30%;">{{ currentTime }} / {{ duration }}</p>
    </div>

    <div class="controls">
      <el-row>
        <el-button circle plain @click="prev" size="mini"><i class="el-icon-d-arrow-left"></i></el-button>
        <el-button type="info" circle plain @click="play()" v-if="root"><i class="el-icon-video-play"></i></el-button>
        <el-button type="primary" circle @click="pause" v-else><i class="el-icon-video-pause"></i></el-button>
        <el-button circle plain @click="next" size="mini"><i class="el-icon-d-arrow-right"></i></el-button>
        <el-button circle plain @click="drawerList = true" size="small"><i class="el-icon-tickets"></i></el-button>
      </el-row>
    </div>
    <el-drawer title="歌曲列表" size="25%" :visible.sync="drawerList" :append-to-body="true" direction="rtl">
      <span v-for="m, index in music" :key="index">
        <el-row style="height: 30px;" :gutter="20">
          <el-col :span="16">
            <div style="margin-left: 15px;" class="grid-content bg-purple" :class="index === tab ? 'font' : ''">
              {{ m.name }}&nbsp;-&nbsp;{{ m.singerName }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-button type="info" circle plain @click="play(m.musicId, index)" size="mini"><i
                  class="el-icon-video-play"></i></el-button>
            </div>
          </el-col>
        </el-row>
        <el-divider></el-divider>
      </span>
    </el-drawer>
  </div>
</template>


<script>
import infoApi from '@/api/infoApi';
export default {
  data() {
    return {
      audioUrl: "",
      //true是播放
      root: true,
      songs: [],
      music: [],
      musicName: "",
      singerName: "",
      musicId: "",
      tab: 0,
      progress: 0,
      oldProgress: 0,

      duration: 0,
      currentTime: "00:00",
      drawerList: false,

    };
  },
  methods: {
    getData() {
      infoApi.getAllSong().then(response => {
        this.music = [];
        this.songs = response.data;
        this.songs.forEach(element => {
          this.music.push(element);
        });
        this.musicId = this.music[this.tab].musicId;
        this.musicName = this.music[this.tab].name;
        this.singerName = this.music[this.tab].singerName;
      })
    },
    prev() {
      if (this.tab === 0) {
        this.$message({
          message: "已是第一首了!",
          type: 'warning'
        })
      } else {
        this.tab -= 1;
        this.musicId = this.music[this.tab].musicId;
        if (!this.root) {
          this.root = true;
          setTimeout(this.play, 800);
        } else {
          this.root = true;
        }
      }
      this.musicName = this.music[this.tab].name;
      this.singerName = this.music[this.tab].singerName;
    },

    play(id, index) {
      this.getData();
      if (id) {
        if (index) {
          this.musicId = id;
          this.tab = index;
          setTimeout(this.play, 500);
          this.root = false;
        } else {
          for (let i = 0; i < this.music.length; i++) {
            if (this.music[i].musicId === id) {
              this.musicId = id;
              this.tab = i;
              setTimeout(this.play, 500);
              this.root = false;
              break;
            }
          }
        }
      } else {
        this.$refs.audioPlayer.play();
        this.root = false;
      }
      this.musicName = this.music[this.tab].name;
      this.singerName = this.music[this.tab].singerName;
    },
    pause() {
      this.$refs.audioPlayer.pause();
      this.root = true;
    },
    next() {
      if (this.tab === this.music.length - 1) {
        this.$message({
          message: "已是最后一首了!",
          type: 'warning'
        })
      } else {
        this.tab += 1;
        this.musicId = this.music[this.tab].musicId;
        if (!this.root) {
          this.root = true;
          setTimeout(this.play, 500);
        } else {
          this.root = true;
        }
      }
      this.musicName = this.music[this.tab].name;
      this.singerName = this.music[this.tab].singerName;
    },
    //音频加载后执行
    handleMetadataLoaded() {
      const audioPlayer = this.$refs.audioPlayer;
      var time = audioPlayer.duration;
      var min = Math.floor(time / 60);
      var second = Math.floor(time - (min * 60));
      if (second < 10) {
        second = "0" + second;
      }
      this.duration = min + ":" + second;
    },

    //音频播放时执行
    handleTimeUpdate() {
      const audioPlayer = this.$refs.audioPlayer;
      const progressBar = this.$refs.progressBar;

      const currentTime = audioPlayer.currentTime;
      const duration = audioPlayer.duration;

      // 检查 duration 是否为有效数值
      if (!isNaN(duration) && isFinite(duration)) {
        const progress = (currentTime / duration) * 100;

        // 更新进度条的值
        this.progress = progress;
        this.oldProgress = progress;
        // 更新音频的当前时间
        var time = currentTime;
        var min = Math.floor(time / 60);
        if (min < 10) {
          min = "0" + min;
        }

        var second = Math.floor(time - (min * 60));
        if (second < 10) {
          second = "0" + second;
        }
        this.currentTime = min + ":" + second;
      }
    },
    range() {
      this.$message({
        message: '我不能被拖动~',
        type: 'warning',
        duration: 1000,
      });
      this.progress = this.oldProgress;
    },
  },
  mounted() {
    this.audioUrl = "/api/getMusic/",
    this.getData();
  },
};
</script>

<style scope>
.el-divider--horizontal {
  margin: 10px !important;
}

.player {
  z-index: 100;
  position: fixed;
  width: 40%;
  height: 75px;
  left: 30%;
  bottom: 0px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .2);
}

.player:hover {
  transition: 0.5s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .8);
}

.controls {
  position: absolute;
  right: 3%;
  line-height: 75px;
}

.font {
  font-weight: bold;
}
</style>

